<template>
  <div>
    <div id="main"></div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, inject } from "vue"; // 主要
import service from "../../../utils/service";
export default defineComponent({
  setup() {
    onMounted(() => {
      service({
        url: "/data/simpleData",
      }).then((res) => {
        if (res.data.code === "200") {
          res.data.data.forEach((item: any) => {
            arr.push(item.x);
            arr1.push(item.val);
          });
        }
        change();
      });
    });
    let echarts: any = inject("echarts"); // 主要
    let arr: any = [];
    let arr1: any = [];
    // 基本柱形图
    const change = () => {
      const chartBox = echarts.init(document.getElementById("main")); // 主要
      const option = {
        title: {
          text: "每周手机数据展示",
          textStyle: {
            fontSize: 16,
            fontWeight: 600,
          },
          left: "center",
          top: "2%",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          data: arr,
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: arr1,
          },
        ],
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      });
    };
    return {
      change,
    };
  },
});
</script>
 
<style  scoped>
#main {
  min-width: 31.25rem;
  min-height: 31.25rem;
  max-height: 500px;
}
</style>
